<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" size="small">
    <el-form-item label="订单所属社区" prop="addressCommunityName">
      <el-input v-model.trim="ruleForm.addressCommunityName" readonly></el-input>
    </el-form-item>

    <el-form-item label="订单地址详情" prop="addressDetails">
      <el-input v-model.trim="ruleForm.addressDetails" readonly></el-input>
    </el-form-item>

    <el-form-item label="订单联系人" prop="addressContacts">
      <el-input v-model.trim="ruleForm.addressContacts" readonly></el-input>
    </el-form-item>

    <el-form-item label="订单联系人电话" prop="addressContactsNumber">
      <el-input v-model.trim="ruleForm.addressContactsNumber" readonly></el-input>
    </el-form-item>

    <el-form-item label="订单备注" prop="orderDescribe">
      <el-input v-model.trim="ruleForm.orderDescribe" readonly type="textarea" :rows="4"></el-input>
    </el-form-item>

    <el-form-item
      label="订单图片"
      prop="orderPicture"
      v-if="(ruleForm.orderPicture || '').split(',').filter(Boolean).length"
    >
      <el-image
        v-for="(it, index) in (ruleForm.orderPicture || '').split(',').filter(Boolean)"
        :key="index"
        class="row-img dashed-border ani-grow"
        :src="$V.staticBaseURL + it"
        :preview-src-list="[$V.staticBaseURL + it]"
      ></el-image>
    </el-form-item>

    <el-form-item label="预约时间" prop="appointmentTime">
      <el-input v-model.trim="ruleForm.appointmentTime" placeholder="请输入预约时间"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
/* Mixins
------------------------------- */
import { Form } from '@/mixins'

/* Api
------------------------------- */

/* Model
------------------------------- */
import { confirmOrderModel } from '../model'

export default {
  mixins: [Form('ruleForm', confirmOrderModel)],
  data () {
    return {
      ruleForm: Object.assign({}, confirmOrderModel),
      rules: {
        appointmentTime: [
          {
            required: true,
            message: this.$t('required', { field: '预约时间' })
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss">
.dashed-border {
  position: relative;
  img {
    border: 1px dashed #eee;
    width: 75px !important;
    height: 75px !important;
  }
}
</style>
